// import { useState } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip, message } from 'antd';
import { FormattedMessage } from 'umi';
import React from 'react';
import numeral from 'numeral';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';
import { VisitDataType } from '../data.d';
import Trend from './Trend';
import Yuan from '../utils/Yuan';
import styles from '../style.less';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 8,
  style: { marginBottom: 24 },
};

// const setNumbers = (num:number) =>{
//   // var num = 1000;
//   var t = setInterval(function(){
//    num++;
//    setDevices(num);
//   if(num==1504){
//     clearInterval(t);
//   }       
//   },1); 
// }
// const [devices, setDevices] = useState<number>(0);

// setNumbers(devices)

          
// useEffect(() => {
//   new Promise((resolve, reject) => {
//     statisticsTotalCount()
//       .then((res) => {
//         if (res && res.code === 200) {
//           console.log(res)
//           resolve(true);
//         }else{
//           message.error(res.message);
//           resolve(false)
//         };
//       })
//       .catch((error) => {
//         reject(error);
//       });
//   });
// },[]);

const IntroduceRow = ({ loading, numbers }: { loading: boolean; numbers: any }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.devices"
            defaultMessage="Devices"
          />
        }
        loading={loading}
        total={() => <strong>{numbers.devices}</strong>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.programs"
            defaultMessage="Programs"
          />
        }
      total={<strong>{numbers.programs}</strong>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.plans"
            defaultMessage="Plans"
          />
        }
      total={<strong>{numbers.plans}</strong>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
  </Row>
);

export default IntroduceRow;
